<html>

<head>
	<title> PHP MYSQL - Search</title>
	<link rel="stylesheet" href="./css/element-ui.css">
	<style>
			.rightBox{
				position: absolute;
				right: 20px;
				text-align: center;
				top: 70px;
    		background-color: #eee;
				padding: 10px;
			}
			.rightBox img{
				width: 60px;
				height: auto;
			}

	</style>
</head>

<body>
	<div id="app">
		<form action="result.php" method="POST" v-on:submit.prevent="search">
			<h3>Search Database: PHP + mysql crud 我的第一个php例子</h3>
			<div class="rightBox" v-if="user.nickname">
				<div>
					<img :src="user.headimgurl" alt="微信头像" />
				</div>
				<p>{{ user.nickname }}</p>
			</div>
			<hr />
			<p><el-input type="text" v-model="keyword" placeholder="请输入关键词，如字母a" name="name" style="width: 300px;"></el-input>
			</p>
			<p><el-button @click="search" type="primary">搜索</el-button></p>
			<h3>搜索结果：{{tableData.length}} 条</h3>
			<hr/>
			<el-table
				height="300"
				:data="tableData">
				<el-table-column prop="id" label="id"> </el-table-column>
				<el-table-column prop="name" label="姓名"> </el-table-column>
			</el-table>
		</form>
	</div>

	<script src="./js/vue.js"></script>
	<script src="./js/element-ui.js"></script>
	<script src="./js/jquery.js"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				keyword: '',
				tableData: [],
				user: {}
			},
			mounted(){
				let user =sessionStorage.getItem('user')
				if(user){
					this.user =JSON.parse(user)
				}
			},
			methods: {
				search() {
					event.preventDefault();
					var fd = new FormData()
					fd.append('name', this.keyword)
					$.ajax({
						type: "POST",
						url: "result.php",
						// form 表单提交
						// data: fd,
						// processData: false, // 重要
						// contentType: false, // 重要
						data: {
							name: this.keyword
						},
						success:  (data) => {
							this.$message({
								message: '搜索成功',
								type: 'success'
							})
							console.log('成功：', data);
							this.tableData = data;
						},
						error: (err) => {
							this.$message({
								message: '搜索成功',
								type: 'error'
							})
							console.log('err', err);
						}
					})
				}
			}

		}); // vue end;
	</script>
</body>

</html>